import React from 'react'
import { Tabs, Badge } from 'antd-mobile';
import '../assets/css/mall.css'
import { getIndexGoods, getNew, getSeckill, getGroupon } from '../request/api'
import img1 from '../assets/images/logo.png'
import img2 from '../assets/images/dingwei.png'
import img4 from '../assets/images/02.png'
import img5 from '../assets/images/优惠券@3x.png'
import img6 from '../assets/images/优惠券领取@3x.png'
import img7 from '../assets/images/xs.png'
import img8 from '../assets/images/hot.png'
import img9 from '../assets/images/brand.png'
import img10 from '../assets/images/赚积分.png'
import img11 from '../assets/images/qg.png'
import img12 from '../assets/images/03.png'
import img13 from '../assets/images/04.png'
import img14 from '../assets/images/05.png'
const tabs = [
    { title: <Badge>综合推荐</Badge> },
    { title: <Badge>销量</Badge> },
    { title: <Badge>价格</Badge> },
    { title: <Badge>好评</Badge> },
    { title: <Badge>店铺</Badge> },
    { title: <Badge>分类</Badge> },
];
class Home extends React.Component {
    constructor() {
        super()
        this.state = {
            goodsList: [],
            newlist: [],
            secklist: [],
            grouponlist: []
        }

    }
    componentDidMount() {
        getIndexGoods()
            .then(res => {
                console.log(res, '商品列表');
                if (res.data.code === 200) {
                    this.setState({
                        goodsList: res.data.list[0].content
                    })
                }
            })
        getNew()
            .then(res => {
                console.log(res, '新人专享');
                if (res.data.code === 200) {
                    this.setState({
                        newlist: res.data.list
                    })
                }
            })
        getSeckill()
            .then(res => {
                console.log(res, '秒杀');
                if (res.data.code === 200) {
                    this.setState({
                        secklist: res.data.list
                    })
                }
            })
        getGroupon()
            .then(res => {
                console.log(res, '万人团');
                if (res.data.code == 200) {
                    this.setState({
                        grouponlist: res.data.list
                    })
                }
            })
    }
    render() {
        const { goodsList, newlist, secklist, grouponlist } = this.state
        return (<div>
            <div className='title'>
                <img className='logo' src={img1} alt="" />
                <div className='ss'>
                    <input type="text" placeholder=' 搜索商品' />
                </div>
                <img className='dingwei' src={img2} alt="" />
            </div>
            <div className='newuser'>
                <ul>
                    <li className='l1'>新人专享</li>
                    <li className='time'>
                        <p>05</p>:
                        <p>42</p>:
                        <p>47</p>
                    </li>
                    <li className='l2'>查看全部></li>
                </ul>
                <div className='gife'>
                    <div className='title1'>
                        <p className='s1'>1重礼</p>
                        <p className='s2'>新人特价商品专区</p>
                        <p className='s3'>（限量供应，先到先得）</p>
                    </div>
                    <div className='goods1'>
                        {newlist.map(item => {
                            return <div className='goods' key={item.id}>
                                <img className='i1' src={item.img} alt="" />
                                <p>￥{item.price}</p>
                                <p>￥{item.market_price}</p>
                                <img className='i2' src={img4} alt="" />
                            </div>
                        })}
                    </div>

                </div>
                <div className='gife'>
                    <div className='title1'>
                        <p className='s1'>2重礼</p>
                        <p className='s2'>新人通用50元礼券</p>
                        <p className='s3'>（下单立减，省了又省）</p>
                    </div>
                    <div className='yhq'>
                        <img className='ii1' src={img5} alt="" />
                        <img className='ii2' src={img6} alt="" />
                    </div>
                </div>
            </div>
            <div className='miaosha'>
                <div className='tb'>
                    <img src={img7} alt="" />
                    <img src={img8} alt="" />
                    <img src={img9} alt="" />
                    <img src={img9} alt="" />
                    <img src={img10} alt="" />
                </div>
                <div className='wz'>
                    <p>限时秒杀</p>
                    <p>畅销商品</p>
                    <p>品质大牌</p>
                    <p>小U自营</p>
                    <p>积分商城</p>
                </div>
            </div>
            {
                grouponlist.map(item => {
                    return <div className='cjms' key={item.id}>
                        <ul>
                            <li className='l1'>橙心万人团</li>
                            <li className='time'>
                                <p>05</p>:
                                <p>42</p>:
                                <p>47</p>
                            </li>
                        </ul>
                        <div className='center' key={item.id}>
                            <div className='left'>
                                <img className='img3' src={item.img} alt="" />
                            </div>
                            <div className='right'>
                                <div className='aa'>{(item.price / item.market_price).toFixed(2) * 10}折</div>
                                <p className='p1'>{item.goodsname}</p>
                                <div className='pp'>
                                    <p className='p2'>￥{item.price}</p>
                                    <p className='p3'>￥{item.market_price}</p>
                                </div>
                                <div className='tt'>
                                    <p className='p4'>总量：{item.count}件</p>
                                    <p className='p5'>每人限购：{item.limit_count}件</p>
                                </div>

                                <img src={img11} alt="" />
                            </div>
                        </div>
                    </div>
                })
            }

            <div className='gife'>
                <div className='title1'>
                    <p className='s1'>限时秒杀</p>
                    <p className='s2'>新人特价商品专区</p>
                    <p className='s3'>（限量供应，先到先得）</p>
                </div>
                <div className='goods1'>
                    {
                        secklist.map(item => {
                            return <div className='goods' key={item.id}>
                                <img className='m1' src={item.img} alt="" />
                                <p>￥{item.price}</p>
                                <p>￥{item.market_price}</p>
                                <img className='m2' src={img4} alt="" />
                            </div>
                        })
                    }

                </div>

            </div>
            <div className='yuyue'>
                <div className='left'>
                    <p>双11尖货预约</p>
                    <img src={img12} alt="" />
                </div>
                <div className='right'>
                    <p>畅销全球</p>
                    <div>
                        <img src={img13} alt="" />
                        <img src={img14} alt="" />
                    </div>

                </div>
            </div>
            <div>
                <Tabs tabs={tabs}></Tabs>
            </div>
            <div className='goolist'>
                {
                    goodsList.map(item => {
                        return <div className='goods2' key={item.id}>
                            <div className='left'>
                                <img className='img3' src={item.img} alt="" />
                            </div>
                            <div className='right'>
                                <div className='aa'>{(item.price / item.market_price).toFixed(1) * 10}折</div>
                                <p>{item.goodsname}</p>
                                <p>{item.description}</p>
                                <div className='tt'>
                                    <p>￥{item.price}</p>
                                    <p>￥{item.market_price}</p>
                                </div>

                                <img className='i2' src={img11} alt="" />
                            </div>
                        </div>
                    })
                }

            </div>


        </div>)
    }
}
export default Home